<template>
  <div class="app">
    <h3>1. options API实现: JSX</h3>
    <JsxCpns></JsxCpns>

    <h3>2. composition API实现: JSX</h3>
    <jsx />
  </div>
</template>

<script lang="jsx" setup>
import { ref, defineComponent } from "vue";
import JsxCpns from "./JsxCpns.vue";
import About from "./About.vue";

const counter = ref(0);

const increment = () => {
  counter.value++;
};
const decrement = () => {
  counter.value--;
};

const jsx = defineComponent({
  render() {
    return (
      <div class="app">
        <h2>当前计数: {counter.value}</h2>
        <button onClick={increment}>+1</button>
        <button onClick={decrement}>-1</button>
        <About />
      </div>
    );
  },
});
</script>

<style lang="scss" scoped></style>
